<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="A layout example that shows off a responsive photo gallery.">

    <title>Zlickr</title>

    <link rel="stylesheet" href="css/pure.css">
    <link rel="stylesheet" href="css/gallery-grid.css">
    <link rel="stylesheet" href="css/gallery.css">
</head>
<body>

<div>
    <div class="header">
        <div class="pure-menu pure-menu-open pure-menu-horizontal">
            <a class="pure-menu-heading" href="">Zlickr</a>

            <ul>
                <li class="pure-menu-selected"><a href="#">Home</a></li>
                <li><a href="#">Photos</a></li>
                <li><a href="#">About</a></li>
            </ul>
        </div>
    </div>

    <div class="pure-g">
        <div class="photo-box pure-u-1 pure-u-med-1-3 pure-u-lrg-1-4">
            <a href="http://www.dillonmcintosh.tumblr.com/">
                <img src="img/1.jpg" alt="Beach">
            </a>

            <aside class="photo-box-caption">
                <span>por <a href="http://www.dillonmcintosh.tumblr.com/">Dillon McIntosh</a></span>
            </aside>
        </div>

        <div class="text-box pure-u-1 pure-u-med-2-3 pure-u-lrg-3-4">
            <div class="l-box">
                <h1 class="text-box-head">Zlickr</h1>
                <p class="text-box-subhead">Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
            </div>
        </div>

        <div class="photo-box pure-u-1 pure-u-med-1-2 pure-u-lrg-1-3">
            <a href="http://www.flickr.com/photos/charliefoster/">
                <img src="img/5.jpg" alt="Bridge">
            </a>

            <aside class="photo-box-caption">
                <span>
                    por <a href="http://www.flickr.com/photos/charliefoster/">Charlie Foster</a>
                </span>
            </aside>
        </div>

        <div class="photo-box photo-box-thin pure-u-1 pure-u-lrg-2-3">
            <a href="http://ngkhanhlinh.dunked.com/">
                <img src="img/6.jpg" alt="Balloons">
            </a>

            <aside class="photo-box-caption">
                <span>
                    por <a href="http://ngkhanhlinh.dunked.com/">Linh Nguyen</a>
                </span>
            </aside>
        </div>

        <div class="photo-box photo-box-thin pure-u-1 pure-u-med-2-3">
            <a href="http://twitter.com/iBoZR">
                <img src="img/7.jpg" alt="Rain Drops">
            </a>

            <aside class="photo-box-caption">
                <span>
                    por <a href="http://twitter.com/iBoZR">Thanun Buranapong</a>
                </span>
            </aside>
        </div>

        <div class="photo-box pure-u-1 pure-u-med-1-2 pure-u-lrg-1-3">
            <a href="http://ngkhanhlinh.dunked.com/">
                <img src="img/2.jpg" alt="Meadow">
            </a>

            <aside class="photo-box-caption">
                <span>
                    por <a href="http://ngkhanhlinh.dunked.com/">Linh Nguyen</a>
                </span>
            </aside>
        </div>

        <div class="photo-box pure-u-1 pure-u-med-1-2 pure-u-lrg-1-3">
            <a href="http://www.nilssonlee.se/">
                <img src="img/3.jpg" alt="City">
            </a>

            <aside class="photo-box-caption">
                <span>
                    por <a href="http://www.nilssonlee.se/">Jonas Nilsson Lee</a>
                </span>
            </aside>
        </div>

        <div class="photo-box pure-u-1 pure-u-med-1-2 pure-u-lrg-1-3">
            <a href="http://www.flickr.com/photos/rulasibai/">
                <img src="img/4.jpg" alt="Flowers">
            </a>

            <aside class="photo-box-caption">
                <span>
                    por <a href="http://www.flickr.com/photos/rulasibai/">Rula Sibai</a>
                </span>
            </aside>
        </div>

        <div class="photo-box pure-u-1 pure-u-med-1-3">
            <a href="http://www.goodfreephotos.com/">
                <img src="img/8.jpg"
                     alt="Port">
            </a>

            <aside class="photo-box-caption">
                <span>
                    por <a href="http://www.goodfreephotos.com/">Yinan Chen</a>
                </span>
            </aside>
        </div>

    </div>

    <div class="footer">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, provident!
    </div>
</div>

</body>
</html>
